<style scoped lang="scss" >
    .bigdata-card1-container{ 
        display: inline-block; 
        background: inherit; 

        // border: 1px solid rgba(255, 255, 255, .3)!important; 
        // background-color: rgba(255, 255, 255, .1)!important;
        // 内阴影，外阴影去掉 inset
        // box-shadow: 1px 1px 10px rgba(255, 255, 255, .8) inset; 
        // -webkit-box-shadow: 1px 1px 10px rgba(255, 255, 255, .8) inset; 

        .header-container{
          height: 42px;
          padding: 2px 8px; 
          overflow: hidden;
          background: rgba(255, 255, 255, .3);
          box-shadow: 0px 0px 10px rgba(255, 255, 255, .4) inset; 

          .main-title{  color: rgba(255, 255, 255, .9); 
            height: 36px; line-height: 42px;
            font-size: 16px; 
            font-weight: 600;letter-spacing: 1px;
          }
          .sub-title{   color: rgba(255, 255, 255, .8); 
            height: 36px; line-height: 46px;
            font-size: 12px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /** 超出长度自动显示... */
          }
        }

        .content-container{ 
          height: calc(100% - 42px);
          padding: 5px; border: 1px solid rgba(255, 255, 255, .1);
          background: rgba(255, 255, 255, .3);
          overflow: hidden;
        }
    }

    // 暗色样式
    .black-style{
      .header-container{ 
        background: rgba(0, 0, 0, .3)!important; 
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .4) inset!important; 
      }
      .content-container{ border: 1px solid rgba(0, 0, 0, .1)!important;
          background: rgba(0, 0, 0, .4)!important;
          
      }
    }
</style>
<template>
  <div class="bigdata-card1-container" :class="{'black-style': bgStyle=='black'}" :style="{width: width, height: height}">
      
      <!-- 标题 -->
      <el-row v-if="!titleSlot" class="header-container">
        <el-col :span="12" class="main-title">
          {{mainTitle}}
        </el-col>
        <el-col :span="12" v-if="!$yhFunc.isEmpty(subTitle)" class="sub-title">
          {{subTitle}}
        </el-col>
      </el-row>
      <el-row v-else class="header-container">
        <slot name="rectangleHeader"></slot>
      </el-row>
      
      <!-- 主内容 -->
      <el-row class="content-container">
        <slot name="rectangleContent"></slot>
      </el-row>
      
  </div>
</template>

<script>
export default {
  name: "BigDataCard1",
  data() {
    return {

    };
  },
  props: {
    width: {
      type: String, default: '100%'
    },
    height: {
      type: String, default: '200px'
    },
    bgStyle: { // white black
      type: String, default: 'white'
    },
    titleSlot: { // 是否自定义开头组件
      type: Boolean, default: false
    },
    mainTitle: {
      type: String, default: '请设置主题',
    },
    subTitle: {
      type: String, default: null,
    }
  },
  created(){

  },
  methods: {

  },
};
</script>